<template>
  <div>
    <ul class="way">
      <li class="huiyuan" v-for="(item,index) in advList" v-if="index==0">
        <img :src="item.advImg| imgPathFilter" alt="" @click="goAdvDetail(item)">
      </li>
      <li class="right">
        <ul>
          <li v-for="(item,index) in advList" v-if="index==1">
            <img :src="item.advImg| imgPathFilter" alt="" @click="goAdvDetail(item)">
          </li>
          <li v-for="(item,index) in advList" v-if="index==2">
            <img :src="item.advImg| imgPathFilter" alt="" @click="goAdvDetail(item)">
          </li>
        </ul>
      </li>
    </ul>
    <p class="tuijian">热门推荐
      <router-link to="/lookMore" tag="span" class="more"> {{lookMore}}</router-link>
    </p>
    <ul class="tuijianlist">
      <li v-for="item in recommendList" @click="goGoodsDetail(item.goodsId,item.categoryCode)">
        <img :src="item.coverImg | imgPathFilter" alt="" width="100%" height="136px">
        <div>
          <p>{{item.goodsName}}</p>
          <span v-if="item.categoryCode=='vipcard_1' || item.categoryCode=='vipcard_2'">
            <p>{{item.goodsPrice}}元</p>
          </span>
          <span v-else>
            <p v-if="isOld">{{item.vipPrice}}元</p>
            <p v-else>{{item.goodsPrice}}元</p>
          </span>
        </div>
      </li>
      <p class="xiala">没有更多了</p>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getCategoryCode} from '../../../test/unit/http'
  export default {
    name: '',
    props: {
      lookMore: '',
      isOld:{type:Boolean },
      moreParams: {},
      recommendList: {type: Array},
      advList: {type: Array}
    },
    data() {
      return {};
    },
    methods: {
      goAdvDetail(adv){
        var jumpType = adv.jumpType;
        if (jumpType == 1) {
          var url = adv.content;
          window.location.href = this.$myUtils.convertHttpUrl(url);
        }
        if (jumpType == 2) {
          this.$router.push({path: 'advcontent', query: {advinfo: JSON.stringify(adv)}})
        }
        if (jumpType == 3) {
          var goodsId = adv.goodsId;
          getCategoryCode({goodsId: goodsId}).then(res => {
            console.log(res);
            if (res.code == 100) {
              var categoryCode = res.object;
              this.goGoodsDetail(goodsId, categoryCode);
            }
          })
        }
      },
      goGoodsDetail(goodsId, categoryCode){
        if (categoryCode == 'vipcard_2' || categoryCode == 'vipcard_1') {
          this.$router.push({path: 'jinkadetail', query: {goodsId: goodsId}});
          return;
        }
        if (categoryCode == 'viproom') {
          this.$router.push({path: 'guibindetail', query: {goodsId: goodsId, entrySource: this.moreParams.entrySource}});
          return;
        }
        if (categoryCode == 'viponly') {
          this.$router.push({path: 'tongdaodetail', query: {goodsId: goodsId, entrySource: this.moreParams.entrySource}});
          return;
        }
        if (categoryCode == 'coupons') {
          this.$router.push({path: 'youhuiquan', query: {goodsId: goodsId}});
          return;
        }
        if (categoryCode == 'insurance') {
          this.$router.push({path: 'baozhangdetail', query: {goodsId: goodsId}});
          return;
        }
        this.$router.push({path: 'goodsdetail', query: {goodsId: goodsId}})
      }
    },
    mounted(){

    },
    updated(){

    },
    created() {
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .way{
    display: flex;
    padding: 10px;
    height: 124px;
    >li{
      flex: 1;
    }
    .huiyuan{
      color: #fff;
      text-align: left;
      position: relative;
      img{
        width: 100%;
        height: 100%;
      }
      div {
        position: absolute;
        top:10px;
        z-index:2 ;
        left: 10px;
        p:first-child {
          background-color: #fff;
          border-radius: 25px;
          height: 20px;
          line-height: 20px;
          width: 65px;
          color: #222;
          font-size: 10px;
          font-weight: 700;
          text-align: center;
        }
        p:nth-child(2) {
          font-size: 20px;
          font-weight: 700;
          margin-top: 18px;
        }
      }
    }
    .right{
      text-align: left;
      li{
        height: 62px;
        position: relative;
        img{
          width: 100%;
          height: 100%;
        }
        div{
          position: absolute;
          top:2px;
          z-index:2 ;
          left: 5px;
          p:first-child{
            color: #fff;
            font-size: 15px;
            padding: 5px 10px 0px;
          }
          p:last-child{
            color: #333;
            font-size: 12px;
            padding:0 10px 10px;
          }
        }

      }
    }
  }
  .tuijian{
    padding:0 10px;
    font-size: 22px;
    color: #111;
    text-align: left;
    margin-top: 10px;
    .more{
      color: #999;
      font-size: 13px;
      float: right;
      margin-top:5px ;
    }
  }
  .tuijianlist{
    text-align: left;
    padding: 10px 0 10px 10px;
    li{
      display: inline-block;
      width: calc(50% - 13px);
      font-size: 0;
      margin-bottom: 13px;
      margin-right: 10px;
      img{
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        height: 114px;
      }
      div{
        border:1px solid #eee;
        border-top:none;
        box-shadow: 0px 5px 15px -9px rgba(0,0,0,0.5);
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        text-align: left;
        padding: 10px;
        p:first-child{
          font-size: 15px;
          color: #333;
        }
        p:last-child{
          font-size: 17px;
          color: #ff7f00;
        }
      }

    }
  }
  .xiala{
    font-size: 12px;
    color: #999;
    padding-bottom: 60px;
    text-align:center
  }
</style>
